import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { and, eq } from '@/lib/db';
import { db, collections, collectionItems } from '@/lib/db';
import { requireUser } from '@/lib/auth/session';
import { getAssetBrief, listCollections, loadItems } from '@/lib/account/queries';
import { valueItem } from '@/lib/account/portfolio';
import { getDisplay } from '@/lib/account/display';
import { deleteItemAction, moveItemAction, removeItemPhotoAction } from '@/lib/account/actions';
import { PageHeader, btnDanger, btnSecondary } from '@/components/account/page-header';
import { ValueSourceBadge } from '@/components/account/portfolio-widgets';
import { Card, CardHeader, Delta, Stat } from '@/components/ui/primitives';
import { confidenceLabel, fmtPct } from '@/lib/format';
import { EditItemForm } from '../../add-item-form';
import { PhotoUploadForm } from './photo-form';

export const metadata: Metadata = { title: 'Item', robots: { index: false } };

export default async function ItemPage({ params }: { params: Promise<{ id: string; itemId: string }> }) {
  const { id, itemId } = await params;
  const u = await requireUser(`/collections/${id}/items/${itemId}`);
  const own = await db().select({ id: collectionItems.id }).from(collectionItems).innerJoin(collections, eq(collections.id, collectionItems.collectionId)).where(and(eq(collectionItems.id, itemId), eq(collections.id, id), eq(collections.userId, u.id))).limit(1);
  if (!own[0]) notFound();
  const loaded = (await loadItems([id])).find((i) => i.id === itemId);
  if (!loaded) notFound();
  const v = valueItem(loaded);
  const brief = await getAssetBrief(loaded.assetId);
  const d = await getDisplay();
  const others = (await listCollections(u.id)).filter((c) => c.collection.id !== id);

  return (
    <>
      <nav className="mb-2 text-xs text-muted">
        <Link href="/collections" className="hover:text-fg">
          Collections
        </Link>{' '}
        /{' '}
        <Link href={`/collections/${id}`} className="hover:text-fg">
          Collection
        </Link>{' '}
        / <span className="text-fg">{loaded.title}</span>
      </nav>
      <PageHeader
        title={loaded.title}
        description={
          <>
            {loaded.categorySlug.replace(/_/g, ' ')} · <ValueSourceBadge item={v} />{' '}
            <Link href={`/asset/${loaded.assetSlug}`} className="underline-offset-4 hover:underline">
              Open asset page →
            </Link>
          </>
        }
        actions={
          <>
            {others.length ? (
              <form action={moveItemAction} className="flex items-center gap-1">
                <input type="hidden" name="itemId" value={itemId} />
                <select name="toCollectionId" className="h-9 rounded-md border border-border bg-elevated px-2 text-[13px]" defaultValue="">
                  <option value="" disabled>
                    Move to…
                  </option>
                  {others.map((o) => (
                    <option key={o.collection.id} value={o.collection.id}>
                      {o.collection.name}
                    </option>
                  ))}
                </select>
                <button className={btnSecondary}>Move</button>
              </form>
            ) : null}
            <form action={deleteItemAction}>
              <input type="hidden" name="itemId" value={itemId} />
              <button className={btnDanger}>Remove item</button>
            </form>
          </>
        }
      />
      <div className="mb-5 grid grid-cols-2 gap-4 sm:grid-cols-4">
        <Stat label="Current value" value={v.valueUsd === null ? '—' : d.money(v.valueUsd)} sub={v.valueUsd === null ? 'no market evidence yet' : v.confidence !== null ? `confidence ${confidenceLabel(v.confidence)}` : 'manual value'} />
        <Stat label="Cost" value={v.costUsd === null ? '—' : d.money(v.costUsd)} sub={loaded.purchasePriceNative !== null && loaded.acquiredCurrency && loaded.acquiredCurrency !== 'USD' ? `${loaded.purchasePriceNative} ${loaded.acquiredCurrency} at acquisition FX` : v.acquiredAt ? `acquired ${v.acquiredAt}` : 'no purchase price'} />
        <Stat label="Gain" value={<Delta value={v.gainPct} className="text-lg" />} sub={v.gainUsd === null ? '—' : d.money(v.gainUsd)} />
        <Stat label="Annualised" value={fmtPct(v.annualizedReturn)} sub={v.holdingDays !== null ? `${v.holdingDays} days held` : 'needs acquisition date'} />
      </div>
      {brief?.stats ? (
        <Card className="mb-5">
          <CardHeader title="Market context" subtitle="From the RareIndex asset record" />
          <dl className="grid grid-cols-2 gap-y-2 p-4 text-xs sm:grid-cols-4">
            <dt className="text-subtle">Asset RIV</dt>
            <dd className="num">{brief.stats.rivUsd ? `${d.money(brief.stats.rivUsd)} (${brief.stats.rivSampleSize} sales)` : '—'}</dd>
            <dt className="text-subtle">Latest sale</dt>
            <dd className="num">{brief.stats.latestSaleUsd ? d.money(brief.stats.latestSaleUsd) : '—'}</dd>
            <dt className="text-subtle">30d / 1y</dt>
            <dd className="num">
              {fmtPct(brief.stats.change30d)} / {fmtPct(brief.stats.change1y)}
            </dd>
            <dt className="text-subtle">Liquidity · rarity</dt>
            <dd className="num">
              {brief.stats.liquidityScore ?? '—'} · {brief.stats.rarityScore ?? '—'}
            </dd>
            <dt className="text-subtle">Active listings</dt>
            <dd className="num">{brief.stats.activeListings}{brief.stats.minAskUsd ? ` · min ask ${d.money(brief.stats.minAskUsd)}` : ''}</dd>
            <dt className="text-subtle">Sales 30d</dt>
            <dd className="num">{brief.stats.sales30d}</dd>
          </dl>
        </Card>
      ) : null}
      <div className="grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        <Card>
          <CardHeader title="Details" />
          <div className="p-4">
            <EditItemForm initial={{ itemId, asset: { id: loaded.assetId, title: loaded.title, categorySlug: loaded.categorySlug, year: null, heroImageUrl: loaded.heroImageUrl, rivUsd: loaded.assetRivUsd }, quantity: loaded.quantity, acquiredAt: loaded.acquiredAt, purchasePrice: loaded.purchasePriceNative, purchaseCurrency: loaded.acquiredCurrency, source: loaded.source, grader: loaded.grader, grade: loaded.grade, certificationNumber: loaded.certificationNumber, serial: loaded.serial, condition: loaded.condition, notes: loaded.notes, tags: loaded.tags, manualValueUsd: loaded.manualValueUsd, soldAt: loaded.soldAt, soldPriceUsd: loaded.soldPriceUsd ?? null }} />
          </div>
        </Card>
        <Card>
          <CardHeader title="Photos" subtitle={`${loaded.photos.length}/12`} />
          <div className="space-y-3 p-4">
            {loaded.photos.length ? (
              <ul className="grid grid-cols-3 gap-2">
                {loaded.photos.map((p) => (
                  <li key={p} className="group relative">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src={p} alt="" className="aspect-square w-full rounded-sm border border-border object-cover" />
                    <form action={removeItemPhotoAction} className="absolute right-1 top-1">
                      <input type="hidden" name="itemId" value={itemId} />
                      <input type="hidden" name="url" value={p} />
                      <button aria-label="Remove photo" className="rounded-sm bg-black/60 px-1.5 text-[10px] text-white opacity-0 group-hover:opacity-100">
                        ✕
                      </button>
                    </form>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="text-xs text-subtle">No photos yet. Photos stay private unless the collection is public.</p>
            )}
            <PhotoUploadForm itemId={itemId} />
          </div>
        </Card>
      </div>
    </>
  );
}